<template>
  <div class="center">
    <!-- pat_3qHUhxU960244SqSEzz1ZEoa1zZ3nSMaj8UQfbRF9CKmWikaEslo5QodwauOKUPq -->
    <h1 class="loginTitle">WarmVax</h1>
    <el-row class="logon">
      <el-col :span="12" :class="overlaylong">
        <div v-if="disfiex === 0">
          <!-- Sign In 区域不变 -->
          <h2
            class="overlaylongH3"
            style="margin-left: 130px; margin-bottom: 20px"
          >
            User Account
          </h2>

          <el-input
            placeholder="phone"
            v-model="signInData.phone"
            style="width: 300px; margin-bottom: 10px"
          />
          <el-input
            placeholder="password"
            type="password"
            v-model="signInData.password"
            style="width: 300px"
          />

          <!-- 验证码输入及图片 -->
          <el-row style="margin-top: 10px; width: 300px">
            <el-col :span="16">
              <el-input
                placeholder="验证码"
                v-model="signInData.captcha"
                autocomplete="off"
                style="width: 60%"
              />
            </el-col>
            <el-col :span="8">
              <img
                :src="captchaUrl"
                @click="updateCaptcha"
                class="captcha-image"
                alt="验证码"
                title="点击刷新验证码"
              />
            </el-col>
          </el-row>

          <el-button
            type="primary"
            @click="submitForm"
            style="
              width: 100px;
              font-size: 15px;
              margin-top: 10px;
              margin-left: 140px;
            "
          >
            Sign in
          </el-button>
        </div>

        <div v-else>
          <!-- Sign Up 区域，和 Sign In 一样的验证码部分 -->
          <h2
            class="overlaylongH1"
            style="margin-left: 100px; margin-bottom: 20px"
          >
            Registered Account
          </h2>

          <el-input
            placeholder="phone"
            v-model="signUpData.phone"
            style="width: 300px; margin-bottom: 10px"
          />
          <el-input
            placeholder="password"
            type="password"
            v-model="signUpData.password"
            style="width: 300px"
          />

          <!-- 验证码输入及图片，和Sign In一样 -->
          <el-row style="margin-top: 10px; width: 300px">
            <el-col :span="16">
              <el-input
                placeholder="验证码"
                v-model="signUpData.captcha"
                autocomplete="off"
                style="width: 60%"
              />
            </el-col>
            <el-col :span="8">
              <img
                :src="captchaUrl"
                @click="updateCaptcha"
                class="captcha-image"
                alt="验证码"
                title="点击刷新验证码"
              />
            </el-col>
          </el-row>

          <el-button
            type="primary"
            @click="signUp"
            style="
              width: 100px;
              font-size: 15px;
              margin-top: 10px;
              margin-left: 140px;
            "
          >
            Sign up
          </el-button>
        </div>
      </el-col>

      <el-col :span="12" :class="overlaytitle">
        <div v-if="disfiex === 0">
          <h2 class="overlaytitleH2">Hello, Friend!</h2>
          <p class="overlaytitleP">
            Enter your personal details and start journey with us
          </p>
          <el-button
            class="buttongohs"
            @click="switchToSignUp"
            style="color: blue"
          >
            Sign up
          </el-button>
        </div>
        <div v-else style="padding-left: 30px">
          <h2 class="overlaytitleH2">Welcome Back!</h2>
          <p class="overlaytitleP">
            To keep connected with us please login with your personal info
          </p>
          <el-button
            class="buttongohs"
            @click="switchToSignIn"
            style="color: blue"
          >
            Sign in
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { loadAsyncRoutes } from '@/router/menu'
import { useTabsStore } from '@/stores/tabs'
axios.defaults.withCredentials = true

export default {
  data() {
    return {
      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0,
      signInData: {
        phone: '',
        password: '',
        captcha: '',
      },
      signUpData: {
        phone: '',
        password: '',
        captcha: '',
      },
      captchaUrl: '',
    }
  },
  methods: {
    updateCaptcha() {
      this.captchaUrl = `http://localhost:8181/captcha/arithmetic?t=${Date.now()}`
    },
    submitForm() {
      if (!this.signInData.captcha) {
        this.$alert('请输入验证码', '提示', { confirmButtonText: '确认' })
        return
      }
      axios
        .post('http://localhost:8181/users/login', this.signInData)
        .then(async (resp) => {
          if (resp.data.code === -1) {
            this.$alert('用户不存在', '提示', { confirmButtonText: '确认' })
            this.updateCaptcha()
          } else if (resp.data.code === -2) {
            this.$alert('密码错误', '提示', { confirmButtonText: '确认' })
            this.updateCaptcha()
          } else if (resp.data.code === -3) {
            this.$alert('验证码错误', '提示', { confirmButtonText: '确认' })
            this.updateCaptcha()
          } else if (resp.data.code === 0) {
            const userData = resp.data.data
            localStorage.setItem('user', JSON.stringify(userData))
            try {
              await loadAsyncRoutes(userData.role)
              useTabsStore().clearTabs()
              this.$router.replace({ path: '/home' })
            } catch (e) {
              this.$alert('菜单加载失败', '错误', { confirmButtonText: '确认' })
            }
          } else {
            this.$alert('未知错误，请联系管理员', '错误', {
              confirmButtonText: '确认',
            })
            this.updateCaptcha()
          }
        })
        .catch(() => {
          this.$alert('无法连接服务器，请稍后再试', '错误', {
            confirmButtonText: '确认',
          })
          this.updateCaptcha()
        })
    },
    signUp() {
      if (!this.signUpData.captcha) {
        this.$alert('请输入验证码', '提示', { confirmButtonText: '确认' })
        return
      }
      axios
        .post('http://localhost:8181/users/register', this.signUpData)
        .then((resp) => {
          if (resp.data.code === 0) {
            this.$alert('注册成功，请登录', '提示', {
              confirmButtonText: '确认',
              callback: () => {
                this.switchToSignIn()
                this.signUpData.phone = ''
                this.signUpData.password = ''
                this.signUpData.captcha = ''
              },
            })
          } else if (resp.data.code === -1) {
            this.$alert('用户已存在', '提示', { confirmButtonText: '确认' })
          } else if (resp.data.code === -2) {
            this.$alert('密码格式不正确', '提示', { confirmButtonText: '确认' })
          } else if (resp.data.code === -3) {
            this.$alert('验证码错误', '提示', { confirmButtonText: '确认' })
          } else {
            this.$alert('注册失败，请稍后再试', '错误', {
              confirmButtonText: '确认',
            })
          }
          this.updateCaptcha()
        })
        .catch(() => {
          this.$alert('无法连接服务器，请稍后再试', '错误', {
            confirmButtonText: '确认',
          })
          this.updateCaptcha()
        })
    },
    switchToSignUp() {
      this.overlaylong = 'overlaylongleft'
      this.overlaytitle = 'overlaytitleright'
      setTimeout(() => {
        this.disfiex = 1
      }, 200)
    },
    switchToSignIn() {
      this.overlaylong = 'overlaylongright'
      this.overlaytitle = 'overlaytitleleft'
      setTimeout(() => {
        this.disfiex = 0
      }, 200)
    },
  },
  mounted() {
    this.updateCaptcha()
  },
}
</script>

<style>
.center {
  background: url('../assets/R-C.jpg');
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loginTitle {
  font-size: 30px;
  color: #fff;
}
.logon {
  background: linear-gradient(to right, #4284db, #29eac4);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  max-width: 800px;
  min-height: 400px;
  margin-top: 20px;
  display: flex;
}
.logon .el-input {
  margin-left: 70px;
}
.captcha-image {
  cursor: pointer;
  margin-left: 10px;
  height: 36px;
  width: 100%;
  border: 1px solid #ccc;
}
.overlaylong,
.overlaylongleft,
.overlaylongright {
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}
.overlaylong {
  border-radius: 10px 0 0 10px;
}
.overlaylongleft {
  border-radius: 0 10px 10px 0;
  transform: translateX(100%);
}
.overlaylongright {
  border-radius: 10px 0 0 10px;
  transform: translateX(0%);
}
.overlaytitle,
.overlaytitleleft,
.overlaytitleright {
  width: 50%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}
.overlaytitle {
  border-radius: 0 10px 10px 0;
}
.overlaytitleleft {
  transform: translateX(0%);
}
.overlaytitleright {
  transform: translateX(-100%);
}

.overlaytitleH2 {
  font-size: 30px;
  color: #fff;
  margin-top: 20px;
}
.overlaytitleP {
  font-size: 15px;
  color: #fff;
  margin-top: 20px;
}
.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  font-size: 15px;
  color: #fff;
  line-height: 40px;
  margin-top: 40px;
}
.overlaylongH3,
.overlaylongH1 {
  font-size: 25px;
  color: black;
}
</style>
